<template>
  <el-card shadow="hover">
    <!--按钮-->
    <template #header>
      <el-button type="primary" :icon="Plus" @click="showAdd">添加</el-button>
    </template>
    <!--表格-->
    <el-table v-loading="loading" border row-key="id" :data="trademarkList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <template #default="scope">
          <img :src="scope.row.logoUrl" :alt="scope.row.tmName" width="100" height="60" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row,$index}">
          <el-button size="small" type="warning" :icon="Edit" title="修改" @click="showUpdate(row)"></el-button>
          <el-button size="small" type="danger" :icon="Delete" title="删除" @click="removeTrademark(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination v-model:currentPage="current" v-model:page-size="pageSize" :page-sizes="[3,6,9]" background layout=" prev, pager, next, jumper,->,total, sizes" :total="total" @size-change="val=> getTrademarkList(1,val)" @current-change="val=>getTrademarkList(val,pageSize)" style="text-align:center;margin-top:20px" />
    <!--对话框-->
    <el-dialog draggable v-model="dialogFormVisible" :title="`${trademark.id?'修改品牌':'添加品牌'}`">
      <!--品牌名称和品牌的LOGO都应该在el-form表单中-->
      <el-form :model="trademark" ref="formRef" :rules="rules" style="width:80%" label-width="100px">
        <!--品牌的名称-->
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model="trademark.tmName" autocomplete="off" />
        </el-form-item>
        <!--品牌的LOGO-->
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!--上传图片的组件的使用-->
          <el-upload class="avatar-uploader" :action="`${BASE_URL}/admin/product/fileUpload`" 
          :show-file-list="false" 
          :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload">
            <!--上传的加载效果,uploadLoading已经在下面定义数据类型为布尔，要是为true就意为显示-->
            <el-icon v-if="uploadLoading" class="avatar-uploader-icon">
            <!-- Loading是一个element内部的加载效果组件 -->
              <Loading />
            </el-icon>
            <!--上传的图片-->
            <img v-else-if="trademark.logoUrl" :src="trademark.logoUrl" class="avatar" />
            <!--上传的时候显示的加号:+-->
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件，且不超过100kb
              </div>
            </template>
          </el-upload>

        </el-form-item>
      </el-form>
      <!--取消和确定按钮-->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrUpdate">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </el-card>

</template>
<script lang="ts">
export default {
  name: 'Trademark'
}
</script>
<script lang="ts" setup>
// 引入ElementPlus组件库中的图标组件
import { Plus, Delete, Edit, Loading } from '@element-plus/icons-vue'
import { ref, onMounted, reactive, nextTick } from 'vue'
// 引入品牌列表数组数据的类型
import type {
  TrademarkListModel,
  TrademarkModel
} from '@/api/product/model/trademarkModel'
// 引入获取品牌列表数据的api接口函数
import {
  getTrademarkListApi,
  addOrUpdateTrademark,
  deleteTrademarkByIdApi
} from '@/api/product/trademark'
// 引入组件
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入上传图片的时候所需要的类型
import type { UploadProps } from 'element-plus'
// 引入表单DOM对象的类型(el-form组件的类型)和验证规则的类型
import type { FormInstance, FormRules } from 'element-plus'
// 页码
const current = ref<number>(1)
// 每页的条数
const pageSize = ref<number>(3)
// 总条数
const total = ref<number>(0)
// 加载效果的标识
const loading = ref<boolean>(false)
// 定义一个数组,用来存储品牌列表数据
const trademarkList = ref<TrademarkListModel>([])
// 定义一个标识,用来显示或者隐藏对话框
const dialogFormVisible = ref(false)
// 定义品牌对象
const trademark = reactive<TrademarkModel>({
  tmName: '', // 品牌名字
  logoUrl: '' // 品牌的图片地址
})
// 定义上传图片的根路径地址
const BASE_URL = import.meta.env.VITE_API_URL
// 定义一个加载效果显示或者隐藏的一个标识
const uploadLoading = ref<boolean>(false)

// 定义用来存储form表单DOM对象的
const formRef = ref<FormInstance>()

// 获取品牌列表数据的方法
const getTrademarkList = async (
  page: number = current.value,
  limit: number = pageSize.value
) => {
  // 开启加载的效果
  loading.value = true
  // 调用接口获取品牌列表数据
  const result = await getTrademarkListApi(page, limit)
  // 关闭加载的效果
  loading.value = false
  // 重新保存页码和每页的条数
  current.value = page
  pageSize.value = limit
  // 更新总条数数据
  total.value = result.total
  // 更新品牌列表数据
  trademarkList.value = result.records
  // 通过消息提示框展示结果信息
  ElMessage.success('获取品牌分页列表数据成功')
}
// 组件加载后的生命周期钩子
onMounted(() => {
  getTrademarkList() // 获取品牌列表数据
})

// 点击添加按钮显示对话框
const showAdd = () => {
  trademark.id = undefined
  trademark.tmName = '' // 清空品牌名称
  trademark.logoUrl = '' // 清空品牌LOGO
  // 显示对话框
  dialogFormVisible.value = true
  // 重置表单验证的信息

  nextTick(() => {
    formRef.value?.resetFields()
  })
}
// 点击修改按钮显示对话框
const showUpdate = (row: TrademarkModel) => {
  // const {id,tmName,logoUrl} = row
  // 拷贝数据
  Object.assign(trademark, row)
  // 显示对话框
  dialogFormVisible.value = true
}

// 上传图片成功或者上传图片限制相关的方法
// 上传图片成功后的方法:把上传成功的图片地址重新的保存一下
const handleAvatarSuccess: UploadProps["onSuccess"] = (res, file) => {
  console.log(res,file,1111111111111);
  // 存储上传成功的图片地址
  trademark.logoUrl = res.data
  // 隐藏加载效果
  uploadLoading.value = false
  // // 表单的验证======
  formRef.value.validateField('logoUrl')
}
// 上传图片的限制(格式和大小)
const beforeAvatarUpload: UploadProps['beforeUpload'] = (file) => {
  // 限制图片的类型
  const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type)
  // 限制图片的大小
  const isLt50k = file.size / 1024 < 100
  if (!isJpgOrPng) {
    ElMessage.error('上传jpg或者png是必须的!')
    return false
  }
  if (!isLt50k) {
    ElMessage.error('上传的图片不能大于50k')
    return false
  }
  // 显示加载效果
  uploadLoading.value = true
  return true
}
// 自定义验证规则的方法
const validateTmName = (rule: any, value: any, callback: any) => {
  if (value.length < 2 || value.length > 10) {
    callback('品牌名称在2到10个字之间')
  } else {
    callback()
  }
}
// 表单的验证规则
const rules = reactive<FormRules>({
  tmName: [
    // 验证品牌名字
    { required: true, message: '必须要输入品牌名称' },
    // { min: 2, max: 10, message: '品牌名称在2到10个字之间', trigger: 'blur' }
    { validator: validateTmName, trigger: 'blur' }
  ],
  logoUrl: [
    // 验证品牌LOGO
    {
      required: true,
      message: '必须要上传一个图片'
    }
  ]
})

// 添加或者修改品牌操作的方法
const addOrUpdate = () => {
  formRef.value.validate(async (valid, fields) => {
    if (!valid) {
      return
    }
    // 验证通过了
    try {
      // 调用接口.实现添加或者修改
      await addOrUpdateTrademark(trademark)
      // 提示信息
      ElMessage.success('操作成功')
      // 关闭对话框
      dialogFormVisible.value = false
      // 刷新
      getTrademarkList(trademark.id ? current.value : 1)
    } catch (error) {
      console.log(error) // 不准
    }
  })
}

// 删除品牌操作
const removeTrademark = (row: TrademarkModel) => {
  ElMessageBox.confirm(`您确定要删除${row.tmName}吗`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await deleteTrademarkByIdApi(row.id)
      ElMessage.success('操作成功')
      // 如果当前页只有一条数据,而且是在大于1的页码中删除数据
      if (trademarkList.length === 1 && current.value > 1) {
        current.value -= 1
      }
      getTrademarkList()
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
